<template>
  <div id="adminView">
    <div class="inputSearch">
      <a-input-search
        v-model:value="searchValue"
        placeholder="输入用户名搜索"
        enter-button
        @search="onSearch"
      />
    </div>
    <a-table :columns="columns" :data-source="data">
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex === 'id'">
          <span>
            <smile-outlined />
            ID
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'avatarUrl'">
          <a-image :width="60" :src="record.avatarUrl || avatar" />
        </template>

        <template v-else-if="column.dataIndex === 'userRole'">
          <span>
            <a-tag :color="record.userRole ? '#f50' : '#87d068'">
              {{ record.userRole ? "管理员" : "普通用户" }}
            </a-tag>
          </span>
        </template>

        <template v-else-if="column.dataIndex === 'createTime'">
          <span>
            {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </span>
        </template>

        <template v-else-if="column.dataIndex === 'action'">
          <span>
            <a-button type="primary" danger @click="showModal(record.id)"
              >删除</a-button
            >
          </span>
        </template>
      </template>
    </a-table>
    <div class="model">
      <a-modal v-model:open="open" title="是否删除用户" @ok="handleDelete">
        <p>确定删除</p>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { deleteUserServer, searchUserServer } from "@/api/user";
import { message } from "ant-design-vue";
import { ref } from "vue";
import dayjs from "dayjs";
const searchValue = ref("");
const onSearch = () => {
  getData(searchValue.value);
};

const columns = [
  { title: "id", dataIndex: "id" },
  {
    title: "用户名",
    dataIndex: "username",
  },
  { title: "账号", dataIndex: "userAccount" },
  { title: "头像", dataIndex: "avatarUrl" },
  { title: "创建时间", dataIndex: "createTime" },
  { title: "角色身份", dataIndex: "userRole" },
  { title: "操作", dataIndex: "action" },
];

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const data = ref([]);
const avatar =
  "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
const getData = async (username = "") => {
  const res = await searchUserServer(username);
  if (res.data.code === 0 && res.data.data) {
    data.value = res.data.data;
  } else {
    message.error("获取用户信息失败");
  }
};
getData();

const open = ref<boolean>(false);
const tempID = ref("");
const showModal = (id: string) => {
  open.value = true;
  tempID.value = id;
};
const handleDelete = async () => {
  if (tempID.value === "") {
    message.error("删除失败");
    return;
  }
  const res = await deleteUserServer(tempID.value);
  if (res.data.code === 0) message.success("删除成功");
  else message.error("删除失败");
  open.value = false;
  tempID.value = "";
  getData();
};
</script>
<style lang="scss" scoped>
#adminView {
  width: 100%;
  .inputSearch {
    margin: 0 auto;
    width: 30%;
    margin-bottom: 20px;
  }
}
</style>
